<template>
  <div class="damage-info">
    <div v-if="damageType === '崩塌'">
        <i class="el-icon-s-help"></i>坡体特征
        <el-row>
          <el-col :span="8">
            <p><i class="el-icon-caret-right left-ten"></i>坡体结构：{{data.damage.collapse.structureName}}</p>
          </el-col>
          <el-col :span="8">
            <p><i class="el-icon-caret-right left-ten"></i>坡高：{{data.damage.collapse.height}}m</p>
          </el-col>
          <el-col :span="8">
            <p><i class="el-icon-caret-right left-ten"></i>坡度：{{data.damage.collapse.angle}}°</p>
          </el-col>
        </el-row>
    </div>
    <div v-if="damageType === '滑坡'">
      <i class="el-icon-s-help"></i>坡体特征
      <el-row>
        <el-col :span="8">
          <p><i class="el-icon-caret-right left-ten"></i>坡体结构：{{data.damage.landslide.structureName}}</p>
        </el-col>
        <el-col :span="8">
          <p><i class="el-icon-caret-right left-ten"></i>坡高：{{data.damage.landslide.height}}m</p>
        </el-col>
        <el-col :span="8">
          <p><i class="el-icon-caret-right left-ten"></i>坡度：{{data.damage.landslide.angle}}°</p>
        </el-col>
      </el-row>
    </div>
    <div v-if="damageType === '沉陷与塌陷'">
      <i class="el-icon-s-help"></i>坡体特征
      <el-row>
        <el-col :span="16">
          <p><i class="el-icon-caret-right left-ten"></i>触发因素：<span v-for="x in data.damage.settlement.settlementReasonNameList" v-bind:key="x">{{x}}、</span></p>
          <p style="margin-left: 20px">其他触发因素描述：{{data.damage.settlement.settlementReasonOther}}</p>
        </el-col>
        <el-col :span="8">
          <p><i class="el-icon-caret-right left-ten"></i>危害形式：{{data.damage.settlement.settlementTypeName}}</p>
        </el-col>
      </el-row>
    </div>
    <div v-if="damageType === '水毁'">
      <i class="el-icon-s-help"></i>水毁规模
      <el-row>
        <el-col :span="8">
          <p><i class="el-icon-caret-right left-ten"></i>地形特征：{{data.damage.water.landTypeName}}</p>
        </el-col>
        <el-col :span="8">
          <p><i class="el-icon-caret-right left-ten"></i>长度：{{data.damage.water.item.length}}m</p>
        </el-col>
        <el-col :span="8">
          <p><i class="el-icon-caret-right left-ten"></i>宽度：{{data.damage.water.item.width}}m</p>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <p><i class="el-icon-s-help"></i>水毁部位：<span v-for="x in data.damage.water.damageLocationNameList" v-bind:key="x">{{x}}、</span></p>
          <p style="margin-left: 20px" v-if="data.damage.water.damageLocationOther">其他水毁部位描述：{{data.damage.water.damageLocationOther}}</p>
        </el-col>
        <el-col :span="12">
          <p><i class="el-icon-s-help"></i>水毁类型：<span v-for="x in data.damage.water.waterDamageTypeNameList" v-bind:key="x">{{x}}、</span></p>
          <p style="margin-left: 20px" v-if="data.damage.water.waterDamageOther">其他水毁类型描述：{{data.damage.water.waterDamageOther}}</p>
        </el-col>
      </el-row>
    </div>

<!--    通用-->
    <div>
      <i class="el-icon-s-help "></i>灾害发生频次
      <el-row>
        <el-col :span="8">
          <p><i class="el-icon-caret-right left-ten"></i>近十年发生次数：{{data.recentCount}}</p>
          <p><i class="el-icon-caret-right left-ten"></i>危害程度：{{data.historyDamageLevelName}}</p>
        </el-col>
        <el-col :span="16">
          <p><i class="el-icon-caret-right left-ten"></i>灾害最近发生时间：{{data.recentTime | formatTimer3}}</p>
          <p><i class="el-icon-caret-right left-ten"></i>灾害处置情况：{{data.historySituationName}}</p>
        </el-col>
      </el-row>

      <i class="el-icon-s-help"></i>
      危害对象: <span v-for="x in data.historyRoadEffectTypeNameList" v-bind:key="x">{{x}}、</span>
      <p style="margin-left: 20px" v-if="data.historyRoadEffectOther">其他危害对象描述：{{data.historyRoadEffectOther}}</p>
    </div>
  </div>

</template>
<script>
import ItemMixins from "./item.mixins";

export default {
  props: ['value', 'damageType', 'data'],
  mixins: [ItemMixins],
  data() {
    return {}
  },
  computed: {},
  methods: {},
  mounted() {
  },
  created() {
  },
}
</script>

<style lang="less">
  .left-ten {
    margin-left: 10px;
  }

  .damage-info {
    font-size: 15px;
    margin-left: 10px;
    line-height: 30px;
  }
</style>
